<template>
	<div style="width: 100%;">
		<div style="display: flex; width: 100%;">
			<el-link style="width: 6%;" @click="goorder()"> 返回订单</el-link>
			<div style="width: 85%;"><p style="text-align: center;color: #E1337F;">请付款：{{data.order.amount}}¥</p></div>
		</div>
		<div style="background-color: #E1337F;height: 0.1rem;"></div>
		<div style="width: 80%;margin-left: 10%;">
			<el-card >
				<div style="width: 100%;">
					<div style="margin-left: 40%;">
						<el-form :model="data.order" :rules="rules" ref="formRef">
							<el-form-item  label="订单号:" prop="ordid">
							      <el-input v-model="data.order.ordid" placeholder="订单号" :prefix-icon="Cellphone" style="width: 16rem;margin-left: 2%;" disabled=""/>
							</el-form-item>
							<el-form-item  label="订单金额:" prop="amount">
							      <el-input v-model="data.order.amount" placeholder="订单金额" :prefix-icon="Cellphone" style="width: 16rem;" disabled=""/>
							</el-form-item>
							<el-form-item  label="收货姓名:" prop="shipname">
							      <el-input v-model="data.order.shipname" placeholder="收货姓名" :prefix-icon="Cellphone" style="width: 16rem;" disabled=""/>
							</el-form-item>
							<el-form-item  label="收货电话:" prop="shipphone">
							      <el-input v-model="data.order.shipphone" placeholder="收货电话" :prefix-icon="Cellphone" style="width: 16rem;" disabled=""/>
							</el-form-item>
							<el-form-item  label="收货地址:" prop="shipadds">
							      <el-input v-model="data.order.shipadds" placeholder="收货地址" :prefix-icon="Cellphone" style="width: 16rem;" disabled=""/>
							</el-form-item>
							<el-form-item  label="付款状态:" prop="pryment">
								  	<el-button  v-if="data.order.pryment!=1" type="danger" size="large" style="background-color: #E1337F; width: 20%; color: #FFFFFF;" plain  @click="data.dialogVisible = true">未付款,点击这里进行付款</el-button>
								  	<el-button v-if="data.order.pryment==1" type="danger" size="large" style="background-color: #E1337F; width: 20%;color: #FFFFFF;" plain >已付款</el-button>
									
								  <el-dialog v-model="data.dialogVisible" title="请付款" width="300" draggable center>
									  <div style="margin-left: 5%;">
										 <p style="margin-left: 25%;color:#E1337F ;">支付金额为:{{data.order.amount}}</p>
										 <el-image style="width: 15rem;height: 18rem;"
										 	:src="$ip+`/public/shows/85`" />
									  </div>
								    
								    <template #footer>
								      <div style="margin-left: 5%;">
								        <el-button @click="data.dialogVisible = false">取消</el-button>
								        <el-button type="primary" style="background-color:#E1337F;border: 0rem;" @click="payment()">
								          确认
								        </el-button>
								      </div>
								    </template>
								  </el-dialog>
							</el-form-item>
						</el-form>
					</div>
					<div style="background-color: #E1337F;height: 0.1rem;"></div>
					<div>
						<p>订单详情：</p>
						<el-table :data="data.order.orditems" :border="true">
						  <el-table-column label="商品编号" prop="commodity.comid" />
						  <el-table-column label="商品名称" prop="commodity.comname"/>
						  <el-table-column label="商品图片" prop="commodity.pic" >
							  <template #default="car">
								  <el-image style="width: 5rem;height: 5rem;"
								  	:src="$ip+`/public/shows/`+car.row.commodity.pic" />
							  </template>
						  </el-table-column>
						  <el-table-column label="生产日期">
							  <template #default="car">
								  {{mytpost(car.row.commodity.tmake)}}
							  </template>
						  </el-table-column>
						  <el-table-column label="数量" prop="num" />
						  <el-table-column label="价格">
							  <template #default="car">
							  		 <p style="color: #E1337F;">¥{{car.row.price}}</p>					 
							  </template>
						  </el-table-column>
						</el-table>
					</div>
				</div>
			</el-card>
		</div>
		</div>
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import { User,Lock,Memo} from '@element-plus/icons-vue'
		import router from"../../router/index.js"
		import store from "../../store/index.js"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../../store/alert.js'
		const route =useRoute()
		const data=reactive({
			order:{orditems:[]},
			dialogVisible:false
		})
		
		function goorder(){
			
			router.push("/cus/myorders")
		}
		function payment(){
			data.dialogVisible = false
			$get("/cus/order/updatepay/"+data.order.ordid).then((read)=>{
				
				success(read.data.msg)
			})
		}
		const mytpost = computed(() => {
			return function(tpost) {
				console.log(tpost)
				let t = new Date(tpost)
				let yy = t.getFullYear()
				let mm = t.getMonth() + 1
				let dd = t.getDate()
				let a = yy + "年" + mm + "月" + dd + "日"
				console.log(a)
				return a
			}
		})
		onMounted(()=>{
			 let a=route.query.ordid
			$get("/cus/order/findByOrdid/"+a).then((read)=>{
				data.order=read.data.data
			})
			
			
		})
</script>

<style>
</style>
